[WC-3537]: Fix resizing issue with Signature pad - #2375

AI Code Review

🔶 Changes requested — one or more medium-severity items must be addressed

What was reviewed

Skipped (out of scope): dist/, pnpm-lock.yaml

CI check status: command required approval — could not be verified automatically.

Findings

🔶 Medium — Primary bug fix (resize handler) has no test coverage

File: packages/pluggableWidgets/signature-web/src/__tests__/useSignaturePad.spec.tsx
Problem: The new tests only cover canvas initialization. The core bug fix — pad.off() before resizing and pad.on() after, which resets _drawingStroke and prevents silent pointerdown drops — has zero coverage. A future refactor could silently regress the fix.
Fix: Add a test that captures the ResizeObserver callback and verifies call order:

it("calls pad.off(), resizes canvas, pad.redraw(), then pad.on() on resize", () => {
    let observerCallback: ResizeObserverCallback | undefined;
    (global.ResizeObserver as jest.Mock).mockImplementation((cb: ResizeObserverCallback) => {
        observerCallback = cb;
        return { observe: jest.fn(), disconnect: jest.fn() };
    });

    stubContainerDimensions(800, 400);
    const imageSource = buildImageSource(); // unavailable → pad initialises
    render(<TestHarness imageSource={imageSource} />);

    const padInstance = MockSignaturePad.mock.instances[0] as any;
    jest.clearAllMocks();

    act(() => {
        observerCallback!([], {} as ResizeObserver);
    });

    const offIdx  = (padInstance.off   as jest.Mock).mock.invocationCallOrder[0];
    const drawIdx = (padInstance.redraw as jest.Mock).mock.invocationCallOrder[0];
    const onIdx   = (padInstance.on    as jest.Mock).mock.invocationCallOrder[0];

    expect(offIdx).toBeLessThan(drawIdx);
    expect(drawIdx).toBeLessThan(onIdx);
});

⚠️ Low — Empty act(() => {}) in loading test adds no value

File: packages/pluggableWidgets/signature-web/src/__tests__/useSignaturePad.spec.tsx line 100
Note: act(() => {}) with no async work inside it flushes no pending state. It looks like it was added to "wait for effects" but actually does nothing in this synchronous context. Remove it to keep the test's intent clear.

⚠️ Low — SizeContainer now hardcodes signature-specific classes

File: packages/pluggableWidgets/signature-web/src/components/SizeContainer.tsx lines 54–60
Note: widget-signature-wrapper, form-control, mx-textarea-input, mx-textarea are baked into the inner div unconditionally. The component is private to this package so it's safe for now, but the name SizeContainer implies a general-purpose utility. If it's purely a signature component going forward, renaming it (e.g. SignatureContainer) would make the coupling explicit and prevent future misuse.

Positives

• The pad.off() → resize → pad.redraw() → pad.on() sequence is well-motivated in the PR description and the inline comment explains the _drawingStroke invariant clearly.
• PEN_OPTIONS lookup table is a clean, type-safe replacement for the useMemo with if/else chains; exhaustiveness is guaranteed by Record<PenTypeEnum, Options>.
• CHANGELOG entries are user-facing and behavior-focused — no implementation leakage.
• Removing isSignatureInitialized ref is the right call: the signaturePadRef === null guard already encodes the same invariant with no extra bookkeeping.
• The three-way nested if in the clear-on-reset effect is correctly collapsed to a single boolean expression.
• Dimension-stubbing pattern (jest.spyOn(HTMLElement.prototype, "offsetWidth", "get")) is the right approach for jsdom layout constraints and is properly cleaned up in afterEach.